<template>
  <div>
     <div class="header">
          <img src="../assets/images/logo.png" alt="">
     </div>
     <div class="box">
       <input type="text" placeholder="请输入手机号码" v-model="p_num">
       <input type="password" placeholder="请输入老密码" v-model="password_old">
       <input type="password" placeholder="请输入新密码" v-model="password_new">
       <input type="password" placeholder="请再次输入新密码" v-model="password_new1">
       
       
       
     </div>
     <div class="btn" @click="ok()">
        <button>提交</button>
    </div>
  </div>
</template>

<script>
export default {
    name: "login",
    data() {
        return {
            p_num: "",
            password_old: "",
            password_new: "",
            password_new1: ""
        };
    },
    methods: {
        ok() {
            if (this.p_num == "") {
                this.$Message.warning("手机号不能为空");
            } else if (this.password_old == "") {
                this.$Message.warning("老密码不能为空");
            } else if (this.password_new == "") {
                this.$Message.warning("新密码不能为空");
            } else if (this.password_new1 == "") {
                this.$Message.warning("再次输入密码不能为空");
            } else {
                var qs = require("qs");
                this.$Spin.show({
                    render: h => {
                        return h("div", [
                            h("Icon", {
                                class: "demo-spin-icon-load",
                                props: {
                                    type: "load-c",
                                    size: 18
                                }
                            }),
                            h("div", "Loading")
                        ]);
                    }
                });
                this.axios({
                    method: "post",
                    url: `${this.siteUrl}/changePassWord`,
                    data: qs.stringify({
                        p_num: this.p_num,
                        oldpw: this.password_old,
                        newpw: this.password_new,
                        repw: this.password_new1
                    })
                })
                    .then(response => {
                      
                        if (response.data.result == 200) {
                            this.$Spin.hide();
                            this.$Message.success("修改成功");
                            this.$router.push({ name: "index" });
                        }else{
                            this.$Spin.hide();                            
                            this.$Message.error(response.data.message);
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
            }
        }
    },
    beforeCreate() {
        document.getElementsByTagName("body")[0].style.background = "#fff";
    },
    mounted() {
    
         this.$Message.config({
            top: 200,
            duration: 1
        });
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.header {
    width: 100%;
    height: 48vh;
    background: #5aa0c8;
    text-align: center;
}
.header img {
    width: 40%;
    margin-top: 8vh;
}

.box {
    width: 80%;
    margin-left: 10%;
    height: 210px;
    margin-top: -60px;
    border-radius: 5px;
    box-shadow: 0px 1px 2px 1px #ccc;
    background: #fff;
}
.box input {
    width: 100%;
    height: 46px;
    line-height: 46px;
    border: none;
    outline: none;
    padding-left: 10px;
}
.box input {
    border-bottom: 1px solid #ddd;
    margin-top: 5px;
}
.box input:last-child {
    border-bottom: none;
}
.btn {
    width: 100%;
}

.btn button {
    width: 80%;
    height: 40px;
    background: #5aa0c8;
    border: none;
    color: #fff;
    outline: none;
    margin-left: 10%;
    margin-top: 50px;
    margin-bottom: 50px;
    border-radius: 5px;
}
</style>
